import React, { useCallback, useEffect, useState } from "react";
import { Form, Input, Modal } from "antd";

const { TextArea } = Input;

export default ({ form, keyName }) => {
	const [open, setOpen] = useState(false);
	const [confirmLoading, setConfirmLoading] = useState(false);
	const [value, setValue] = useState("");

	const showModal = useCallback(() => {
		setValue(form.getFieldValue(keyName)?.replace(/,/g, "\n"));
		setOpen(true);
	}, [setOpen, form, keyName]);

	const handleOk = useCallback(() => {
		form.setFieldsValue({ [keyName]: value.replace(/\r?\n/g, ",") });
		setOpen(false);
	}, [setOpen, form, keyName]);

	const handleCancel = useCallback(() => {
		setOpen(false);
	}, [setOpen]);

	return (
		<>
			<span style={{ cursor: "pointer" }} onClick={showModal}>
				···
			</span>
			<Modal title="批量输入" width={620} open={open} onOk={handleOk} confirmLoading={confirmLoading} onCancel={handleCancel}>
				<div className="sectionContent">
					<div>
						<p>1、分行输入内容，提交后主页面输入框会按照逗号自动隔开，点击查询可批量查询；</p>
						<p>2、注释: 每行输入1个内容，最多500个，例如:</p>
						<p>1272572508553111112223</p>
						<p>1272572512332111112226</p>
					</div>
					<div style={{ marginTop: "10px" }}>请输入搜索内容：</div>
					<TextArea
						value={value}
						onChange={e => setValue(e.target.value)}
						placeholder=""
						autoSize={{ minRows: 5, maxRows: 10 }}
					/>
				</div>
			</Modal>
		</>
	);
};
